<template>
  <common-edit-dialog
    :title="title"
    :visible.sync="openEdit"
    @cancel="cancel"
    @submit="submitForm"
    :buttonLoading="buttonLoading"
    width="500px"
  >
    <el-form ref="form" :model="form" label-width="45px" @submit.native.prevent>
      <el-form-item
        v-for="(item, index) in form.ipAddressList"
        :label="labelEdit"
        :key="index"
        :prop="'ipAddressList.' + index"
        :rules="labelEdit === 'IP' ? rules.IP : rules.DOMAIN"
      >
        <div style="display: flex">
          <common-input
            v-model="ipListOther[index]"
            :verify="false"
            :placeholder="labelEdit === 'IP' ? '支持IPV4/IPV6格式' : '请输入'"
          ></common-input>
          <el-button
            style="font-size: 12px; margin-left: 7px"
            type="danger"
            clearable
            plain
            v-show="form.ipAddressList.length > 1"
            @click.prevent="removeDomain(item)"
            >删除
          </el-button>
          <el-button
            type="primary"
            style="font-size: 12px; margin-left: 7px"
            plain
            v-if="index === 0"
            @click.prevent="addDomain()"
            >新增
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="描述" prop="remark">
        <common-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import { flowFilterEdit } from "@/api/apisecurity/flowfilter/flowfilter";
import { validateIPOrNull, validateDomainOrNull } from "@/utils/formValidates";

export default {
  data() {
    const checkIP = (rule, value, callback) => {
      let i = parseInt(rule.field.split(".")[1]);
      console.log(this.form.ipAddressList);
      let item = this.form.ipAddressList[i];
      if (
        this.form.ipAddressList.filter((f) => f === item && f !== "").length > 1
      ) {
        callback(new Error("值不能重复"));
      } else {
        callback();
      }
    };
    return {
      buttonLoading: false,
      title: "编辑流量过滤",
      openEdit: false,
      labelEdit: "IP",
      form: {
        id: "",
        ipAddressList: [""],
        remark: "",
      },
      ipListOther: [],
      filterType: "",
      rules: {
        IP: [
          { required: true, validator: checkIP, trigger: "blur" },
          {
            required: true,
            message: "请输入正确的IP地址",
            validator: validateIPOrNull,
            trigger: "blur",
          },
        ],
        DOMAIN: [
          { required: true, validator: checkIP, trigger: "blur" },
          {
            required: true,
            message: "请输入正确的域名",
            validator: validateDomainOrNull,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    show(data) {
      this.openEdit = true;
      this.form.id = data.id;
      if (data.filterRule) {
        this.form.ipAddressList = data.filterRule.split(",");
      } else {
        this.form.ipAddressList = [""];
      }
      this.form.remark = data.remark;
      this.labelEdit = data.filterType || "IP";
      this.ipListOther = this.form.ipAddressList;
      this.form.filterType = data.filterType;
    },

    removeDomain(item) {
      let index = this.form.ipAddressList.indexOf(item);
      if (index !== -1) {
        this.form.ipAddressList.splice(index, 1);
      }
    },
    addDomain() {
      this.form.ipAddressList.push("");
    },

    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          this.form.ipAddressList = this.form.ipAddressList.filter((item) => {
            return item !== "";
          });
          flowFilterEdit({
            id: this.form.id,
            filterRule: this.form.ipAddressList.join(","),
            remark: this.form.remark,
            filterType: this.form.filterType,
          })
            .then((res) => {
              if (res && res.code === 200) {
                this.$emit("submitForm");
                this.$GlobalSuccessMessage("编辑成功");
                this.openEdit = false;
              } else {
                this.$GlobalErrorConfirm("编辑失败", res.msg);
              }
            })
            .catch(() => {})
            .finally(() => {
              this.buttonLoading = false;
            });
        }
      });
    },
    cancel() {
      this.openEdit = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label:before {
  display: none !important;
}
</style>
